<template>
    <div class="login">
        <p class="login-title">{{ title }}</p>
        <van-form @submit="onSubmit" class="form-wrap">
            <van-field
                v-model="state.username"
                name="username"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="state.password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
// import { login } from "../api/index";
export default defineComponent({
    name: "login",
    setup() {
        const router = useRouter();
        const route = useRoute();
        const store = useStore();
        const title = ref("渐进式JavaScript 框架-登录");
        const state = reactive({
            username: "",
            password: "",
        });
        // const onSubmit = async (values) => {
        //     try {
        //         Toast.loading({
        //             duration: 0,
        //             message: "加载中...",
        //             forbidClick: true,
        //         });
        //         let result = await login(values);
        //         Toast.clear();
        //         if (result.code == 0) {
        //             store.commit("LOGIN", {
        //                 data: result.data,
        //             });
        //             Toast("登录成功");
        //             setTimeout(() => {
        //                 const fullPath = route.query.fullPath || "/";
        //                 router.replace({
        //                     path: fullPath,
        //                 });
        //             }, 2000);
        //         }
        //     } catch (error) {}
        // };
        return {
            title,
            state,
            // onSubmit,
        };
    },
});
</script>
<style lang="less">
.login-title {
    color: #000;
    text-align: center;
    font-size: 32px;
    margin-top: 40px;
}
.form-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -50%);
}
</style>
